<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="test">
    <!-- 
      默认: 传递就是event对象
      传递自定义参数: 
          React: <button  onClick={() => test2('abc')}>
          Vue: <button  @click="test2('abc')">    
              // 内部会在外面包一层函数  () => test2('abc')
      传递自定义参数和event
          React: <button  onClick={(event) => test3('abc', event)}>
          Vue: <button  @click="test3('abc', $event)">
              // 内部会在外面包一层函数  ($event) => test3('abc', $event)
          在绑定事件时, vue提供了一个内置的变量: $event, 就是事件对象
      如果事件回调, 只是执行一条更新数据的语句, 可以直接在绑定事件时直接编写
     -->
    <button @click="test1">默认参数: event对象</button>
    <button @click="test2('abc')">传递自己的参数</button>
    <button @click="test3('cba', $event)">传递自定义参数和event</button>

    <h3>count: {{count}}</h3>
    <button @click="test4">增加count</button>
    <button @click="count++">增加count2</button>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    new Vue({
      el: "#test",
      data: {
        count: 0  
      },
      methods: {
        test1 (e) {
          alert(e.target.innerText)
        },

        test2 (msg) {
          alert(msg)
        },

        test3 (msg, e) {
          alert(msg + '---' + e.target.innerText)
        },

        test4 () {
          this.count++
        }
      }
    })
  </script>
</body>
</html>